<template>
  <h1>test/index.vue {{ messege }}</h1>
  <hr/>

  <h3>Element Plus</h3>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
  <el-icon :size="60" color="green">
    <Sunny/>
  </el-icon>

  <hr/>
  <h3>Pinia</h3>
  <h1>{{ count }}</h1>
  <button @click="handleClick">click</button>
  <br />
  <h1>{{ $store.test.useTestStore().count }}</h1>
  <button @click="$store.test.useTestStore().add">click</button>
  <br/>
  <button @click="$store.test.useTestStore().clear">清空</button>

  <hr/>
  <h3>Axios统一请求</h3>
  <button @click="requestApi">click</button>
  <h1>{{ res }}</h1>

  <hr/>
  <h3>全局组件glabalComponent</h3>
  <base-no-data #nodata>aaaa</base-no-data>
  <base-no-data #nodata2>bbbb</base-no-data>
</template>


<script setup>
    import {ref} from 'vue';
    import BaseNoData from "@/components/base/BaseNoData.vue";

    const messege = ref('hello world');

    // Pinia
    const {proxy} = getCurrentInstance();
    let useTestStore = proxy.$store.test.useTestStore();
    let {count} = toRefs(useTestStore);
    let {add} = useTestStore;
    function handleClick() {
      add();
    }

    // Axios统一请求
    let res = ref(null);
    async function requestApi() {
      res = await proxy.$api.demo.time();
    }
</script>